<template>
	<view class="binding-page">
		<view class="hint">请输入您要绑定的新手机号码，绑定成功后可用此号码进行登录康宝宝</view>
		<view class="binding-item">
			<input 
                type="text" 
                placeholder="请输入手机号" 
                class="binding-input"
                v-model="phone"
                maxlength="11"
            />
			<button 
                type="default" 
                class="binding-btn"
                @click="bindPhone"
            >
                绑定
            </button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const phone = ref('');

// 校验手机号格式
const validatePhone = (phone) => {
    const reg = /^1[3-9]\d{9}$/; // 校验中国大陆手机号
    return reg.test(phone);
};

const bindPhone = async () => {
	// 1. 校验手机号格式
	if (!validatePhone(phone.value)) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none',
			duration: 2000
		});
		return;
	}

	// // 2. 获取当前用户 ID
	// const userId = uni.getStorageSync('userId'); 
	// if (!userId) {
	// 	uni.showToast({
	// 		title: '用户未登录，请先登录',
	// 		icon: 'none',
	// 		duration: 2000
	// 	});
	// 	setTimeout(() => {
 //            uni.navigateTo({
 //                url: '/pages/login/login' // 跳转到登录页面
 //            });
 //        }, 2000);
	// 	return;
	// }

	// 3. 调用后端接口发送验证码
	try {
		const res = await uni.request({
			method: 'GET',
			url: 'http://localhost:9100/api/user/sendVerificationCode',
			header: {
				'bece_token': uni.getStorageSync('bece_token') 
			},
			data: {
				phone: phone.value
			}
		});

		if (res.data.code === 200) {
			// 跳转到验证码页面，并传递手机号			
			uni.navigateTo({
				url: `/pages/setting/inputcode/inputcode?phone=${phone.value}`
			});
		} else {
			uni.showToast({
				title: res.data.msg || '',
				duration: 2000
			});
		}
	} catch (err) {
		uni.showToast({
			title: '网络请求失败，请稍后重试',
			duration: 2000
		});
		console.error('发送验证码请求出错:', err);
	}
};
</script>

<style scoped>
.binding-page {
    padding: 40rpx 60rpx;
}

.hint {
    font-size: 28rpx;
    color: #666;
}

.binding-item {
    padding: 100rpx 20rpx;
}

.binding-input {
    padding: 20rpx 0;
    font-size: 28rpx;
    border-bottom: 4rpx solid #666ee8;
}

.binding-btn {
    margin-top: 60rpx;
    color: #fff !important;
    background-color: #666ee8 !important;
    border-radius: 100rpx;
}
</style>